<template>
    <div>
        <h1 class="title">尼禄·克劳狄乌斯·凯萨·奥古斯都·日耳曼尼库斯</h1>
        <p class="subtitle">
            <span>发表时间：2018-08-08 08:08:08</span>
            <span>点击3次</span>
        </p>
        <div class="content">
            <div class="thumb">
                <vue-preview :slides="slide1" @close="handleClose" class="thumbpic"></vue-preview>
            </div>
            <p>
                尼禄·克劳狄乌斯·凯萨·奥古斯都·日耳曼尼库斯，生前为罗马帝政的第五代皇帝，生涯被涂上谋略、嗜血与毒之色彩的恶名昭彰的暴君。（我老婆）
            </p>
        </div>
        <!-- 子组件评论区 -->
        <comment></comment>
    </div>
</template>

<script>
import comment from '../subcomponents/comment'
export default {
    data() {
        return {
            id: this.$route.params.id,
            slide1: [
                {
                    src: './static/images/photoslide1.jpg',
                    msrc: './static/images/photoslide1.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 801,
                    h: 601
                },
                {
                    src: './static/images/photoslide2.jpg',
                    msrc: './static/images/photoslide3.png',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 512,
                    h: 724
                }
            ]
        }
    },
    methods: {
        handleClose () {
            console.log('close event')
        }
    },
    components: {
        'comment': comment
    }
}
</script>

<style scoped>
    /* 图片标题 */
    .title {
        padding: 10px;  
        font-size: 17px;
        line-height: 24px;
        color: rgb(51, 51, 51);
        text-align: center;
    }
    /* 发布时间 */
    .subtitle {
        padding: 0 10px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        color: rgb(153, 153, 153);
    }
    /* 发布信息区 */
    .content {
        padding: 10px;
    }
    .content p {
        color: rgb(51, 51, 51);
        font-size: 14px;
        line-height: 24px;
        word-break: break-all;
    }
    .content img {
        width: 100%;
    }
</style>

<style>
    /* 发布图片 */
    .my-gallery figure{
        text-align: center;
        margin: 10px auto;
        overflow: hidden;
    }
    .my-gallery img {
        box-shadow: 0 0 8px #999;
    }
    /* 图片大小 */
    .my-gallery img {
        width: 260px;
        height: 160px;
    }
</style>